<template>
    <el-select placeholder="环境"
               v-model="$data.current"
               v-bind="$attrs"
               @change="product_change" style="display: inline-block">

        <el-option
            v-for="item in $data.db_rows"
            :key="item.code"
            :label="item.code + ' ' + item.name"
            :value="item.code">
            <div style="display: flex;justify-content: space-between;">
                <span style="color: #ff9c01;margin-right:10px;">{{ item.code }}</span>
                <span style="">{{ (item.isActive ? '◈' : '') + ' ' + item.name }}</span>
            </div>

        </el-option>

    </el-select>
</template>
<style scoped lang="scss">
</style>
<script setup>
/**
 * Created by CodeGenerator  at 2022-09-07 13:54:56
 */



defineOptions({
    name: "app-env",
    inheritAttrs: true,
});

//定义 vue2的this,当前组件
const $self = getCurrentInstance();

//定义 $attrs
const $attrs = useAttrs();



//定义data
const $data = reactive({
    db_rows: [],
    current: "",
    version: 1
});


const $props = defineProps({

});


const $model = defineModel({ type: String });



const list = ref();

//定义事件
const $emit = defineEmits(["update:modelValue","loaded"]);



const loadData = function() {
    return jv.$http.post("/dev/app-deploy-setting/apis").then(res => {
        $data.db_rows = res.data.data;
        $emit("proc", $data.db_rows);
        if(!this.ajaxed){
            this.ajaxed = true;
            $emit("change", $data.current, $data.db_rows.find(it => it.code == $data.current));
        }
    });
};
const product_change = function(v) {
    $emit("update:modelValue", v);
    $emit("change", v, $data.db_rows.find(it => it.code == v));
};

onMounted( function() {
    $data.current = $model.value;
    $data.db_rows = [];
    loadData()
} )

watch($model, function(v) {
    if (v != $data.current) {
        $data.current = v;
    }
} ,{ immediate:true,deep:true });

</script>
